import { ResultPage, Card, Button , Swiper} from 'antd-mobile'
import { useState,useEffect } from 'react'
import { LoopOutline } from 'antd-mobile-icons'
import axios from 'axios'
const App=()=>{
  const [barrer,setBarrer]=useState([])
  const [list,setList]=useState([])
  const getBarrer=async()=>{
    const resp=await axios.get('/api/swiper')
    setBarrer(resp.data.data)
  
  }
  const getlist=async()=>{
    const res=await axios.get('/api/news/simple')
    setList(res.data.data)
    console.log(res);
    
  }
  useEffect(()=>{
    getBarrer()
    getlist()
  },[])
  return <div>
     <ResultPage
      status='success'
      title='火车票预订'
      description='便捷式购票服务你的每一次出行'
    >
      <ResultPage.Card style={{  padding: 8 }}>
       <div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>北京</span>
          <LoopOutline />
          <span>上海</span>
        </div>
        <div>
          <span>2024-12-10</span>
          <span>周二(今天)</span>
        </div>
        <div>
        
        </div>
       </div>
      </ResultPage.Card>
      
      <Button block color='primary'>搜索</Button>
      <Swiper autoplay> 
        {
          barrer.map((item,index)=>{
            return <Swiper.Item key={index}>
              <img src={item.image} alt="" />
            </Swiper.Item>
          })
        }
      </Swiper>
      <div style={{display:'flex',justifyContent:'space-between',marginTop:10}}>
        <span style={{fontSize:18}}>出行快讯</span>
        <span>更多</span>
        {
          list.map((v,i)=>{
            return <div  key={i}>
             <p> {v.date}</p>
             <p> {v.title}</p>
            </div>
          })
        }
      </div>
    </ResultPage>
 
  </div>
}
export default App